<!-- 更多看板 -->
<template>
  <div class="dy-panel" v-if="showTrafficMoreLayer">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <div class="dy-panel-item" v-for="(item,index) in moreDataList" @click="clickMoreEvent(item)">
          <div class="t-l"></div>
          <div class="t-r"></div>
          <div class="b-l"></div>
          <div class="b-r"></div>
          <div class="dy-panel-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
          <div class="dy-panel-text">{{item.title}}</div>
        </div>
      </div>
    </div>
  </div>
  <traffic-jjrcldb-layer v-if="jjrcldbShowLayer" @closeChild="closeChild"></traffic-jjrcldb-layer>
  <traffic-whpcllph-layer v-if="whpchlphShowLayer" @closeChild="closeChild"></traffic-whpcllph-layer>
  <traffic-ydcldb-layer v-if="ydcldbShowLayer" @closeChild="closeChild"></traffic-ydcldb-layer>
  <traffic-hmdcljl-layer v-if="hmdcljlShowLayer" @closeChild="closeChild"></traffic-hmdcljl-layer>
  <traffic-ndclysqs-layer v-if="ndclysqsShowLayer" @closeChild="closeChild"></traffic-ndclysqs-layer>
  <traffic-ydclysqs-layer v-if="ydclysqsShowLayer" @closeChild="closeChild"></traffic-ydclysqs-layer>
  <traffic-jqrclfx-layer v-if="jqrcllfxShowLayer" @closeChild="closeChild"></traffic-jqrclfx-layer>
  <traffic-cplezb-layer v-if="cplxzbShowLayer" @closeChild="closeChild"></traffic-cplezb-layer>
  <traffic-sdcldb-layer v-if="sdcldbShowLayer" @closeChild="closeChild"></traffic-sdcldb-layer>
</template>
<script setup>
  import {ref} from "vue";
  import jjrcldb from "../../../assets/img/yztraffic/节假日车流对比.png";
  import whpchlph from "../../../assets/img/yztraffic/危化品车流排行.png"
  import ydcldb from "../../../assets/img/yztraffic/月度车流对比.png";
  import hmdcljl from "../../../assets/img/yztraffic/黑名单车辆记录.png";
  import ndclysqs from "../../../assets/img/yztraffic/年度车流营收趋势.png";
  import jqrcllfx from "../../../assets/img/yztraffic/近七日车流量分析.png";
  import cplxzb from "../../../assets/img/yztraffic/车牌.png";
  import sdcldb from "../../../assets/img/yztraffic/sdcldb.png";
  import TrafficJjrcldbLayer from "./trafficJjrcldbLayer.vue";
  import TrafficWhpcllphLayer from "./trafficWhpcllphLayer.vue";
  import TrafficYdcldbLayer from "./trafficYdcldbLayer.vue";
  import TrafficHmdcljlLayer from "./trafficHmdcljlLayer.vue";
  import TrafficNdclysqsLayer from "./trafficNdclysqsLayer.vue";
  import TrafficYdclysqsLayer from "./trafficYdclysqsLayer.vue";
  import TrafficJqrclfxLayer from "./trafficJqrclfxLayer.vue";
  import TrafficCplezbLayer from "./trafficCplezbLayer.vue";
  import TrafficSdcldbLayer from "./trafficSdcldbLayer.vue";

  const props = defineProps({
    showTrafficMoreLayer: Boolean
  })
  const emit = defineEmits(['closeMoreLayers','showMoreLayers']);

  const closeCurrent = function (){
    emit("closeMoreLayers",'traffic');
  }
  const showCurrent = function (){
    emit("showMoreLayers",'traffic');
  }

  const moreDataList = ref([
    {
      title:'节假日车流对比',
      icon: jjrcldb,
      name: 'jjrcldb'
    },
    {
      title:'危化品车流排行',
      icon: whpchlph,
      name: 'whpchlph'
    },
    {
      title:'月度车流对比',
      icon: ydcldb,
      name: 'ydcldb'
    },
    {
      title:'黑名单车辆记录',
      icon: hmdcljl,
      name: 'hmdcljl'
    },
    {
      title:'年度车流营收趋势',
      icon: ndclysqs,
      name: 'ndclysqs'
    },
    {
      title:'月度车流营收趋势',
      icon: ndclysqs,
      name: 'ydclysqs'
    },
    {
      title:'近七日车流量分析',
      icon: jqrcllfx,
      name: 'jqrcllfx'
    },
    {
      title:'车牌类型占比',
      icon: cplxzb,
      name: 'cplxzb'
    },
    {
      title:'时段车流对比',
      icon: sdcldb,
      name: 'sdcldb'
    }
  ])

  const jjrcldbShowLayer = ref(false);//显示 节假日车流对比
  const whpchlphShowLayer = ref(false);//显示 危化品车流排行
  const ydcldbShowLayer = ref(false);// 显示 月度车流对比
  const hmdcljlShowLayer = ref(false);// 显示 黑名单车辆记录
  const ndclysqsShowLayer = ref(false);//显示 年度车流营收趋势
  const ydclysqsShowLayer = ref(false);//显示 年度车流营收趋势
  const jqrcllfxShowLayer = ref(false);//显示 近七日车流量分析
  const cplxzbShowLayer = ref(false);//车牌类型占比
  const sdcldbShowLayer = ref(false);// 显示 时段车流对比

  const clickMoreEvent = function (item){
    closeCurrent();
    if (item.name === 'jjrcldb'){
      jjrcldbShowLayer.value = true;
    }else if (item.name === 'whpchlph'){
      whpchlphShowLayer.value = true;
    }else if (item.name === 'ydcldb'){
      ydcldbShowLayer.value = true;
    }else if (item.name === 'hmdcljl'){
      hmdcljlShowLayer.value = true;
    }else if (item.name === 'ndclysqs'){
      ndclysqsShowLayer.value = true;
    }else if (item.name === 'ydclysqs'){
      ydclysqsShowLayer.value = true;
    }else if (item.name === 'jqrcllfx'){
      jqrcllfxShowLayer.value = true;
    }else if (item.name === 'cplxzb'){
      cplxzbShowLayer.value = true;
    }
    else if (item.name === 'sdcldb'){
      sdcldbShowLayer.value = true;
    }
  }

  const closeChild = function (){
    jjrcldbShowLayer.value = false;
    whpchlphShowLayer.value = false;
    ydcldbShowLayer.value = false;
    hmdcljlShowLayer.value = false;
    ndclysqsShowLayer.value = false;
    ydclysqsShowLayer.value = false;
    jqrcllfxShowLayer.value = false;
    cplxzbShowLayer.value = false;
    sdcldbShowLayer.value = false;
    showCurrent();
  }

</script>
<style scoped>
.dy-panel{
  position: fixed;
  top: 27vh;
  width: 100%;
  .dy-panel-main{
    background: rgba(5, 36, 44, 0.9);
    width: 80vh;
    min-height: 50vh;
    margin: 0 auto;
    padding-right: 2.5vh;
    padding-bottom: 2.5vh;
    position: relative;
    .dy-panel-header{
      height: 3vh;
      .dy-panel-close{
        position: absolute;
        height: 2.6vh;
        width: 2.6vh;
        background-image: url("../../../assets/img/public/关闭.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 1vh;
        top: 2vh;
      }
    }
    .dy-panel-content{
      display: flex;
      padding: 1vh;
      flex-wrap: wrap;
      .dy-panel-item{
        position: relative;
        width: 30%;
        border: 1px solid #407f86;
        margin-left: 2.2vh;
        margin-top: 2.5vh;
        padding: 2vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        .t-l{
          position: absolute;
          border-top: 2px solid #00EAFF;
          border-left: 2px solid #00EAFF;
          width: 2vh;
          height: 2vh;
          left: 0;
          top: 0;
        }
        .t-r{
          position: absolute;
          border-top: 2px solid #00EAFF;
          border-right: 2px solid #00EAFF;
          width: 2vh;
          height: 2vh;
          right: 0;
          top: 0;
        }
        .b-r{
          position: absolute;
          border-bottom: 2px solid #00EAFF;
          border-right: 2px solid #00EAFF;
          width: 2vh;
          height: 2vh;
          right: 0;
          bottom: 0;
        }
        .b-l{
          position: absolute;
          border-bottom: 2px solid #00EAFF;
          border-left: 2px solid #00EAFF;
          width: 2vh;
          height: 2vh;
          left: 0;
          bottom: 0;
        }
        .dy-panel-icon{
          width: 3.8vh;
          height: 3.8vh;
          background-size: 100% 100%;
          margin: 2vh 0;
        }
        .dy-panel-text{
          color: #FFFFFF;
          font-family: "PingFang SC",serif;
          font-weight: bolder;
          font-size: 2vh;
        }
      }
    }
  }
}

</style>
